<template>
  <div class="bar">
    <a-row type="flex">
      <a-col :span="20">
        <a-row type="flex" :gutter="[8, 8]">
          <a-col>
            <div class="itemWrap">
              <div class="label">
                <span>时间选择</span>
              </div>
              <div class="separator">
                <span>:</span>
              </div>
              <div class="content">
                <a-range-picker v-model="rangeTime" @change="onTimeChange" />
              </div>
            </div>
          </a-col>

          <a-col>
            <div class="itemWrap">
              <div class="label">
                <span>分公司</span>
              </div>
              <div class="separator">
                <span>:</span>
              </div>
              <div class="content">
                <a-select 
                show-search
                placeholder="请选择"
                @change="handleChange"
                v-model="search.company"
                style="width:300px;">
                  <a-select-option
                  v-for="(item, index) in companyData"
                   :key="index" :value="item">{{ item }}</a-select-option>
                </a-select>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="4" style="text-align: right;">
        <a-button type="primary" style="margin-right: 8px;" @click="searchData()">搜索</a-button>
        <a-button type="primary" @click="restSearchData()">重置</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { getRoleId } from "@/unit/tool";
import { WarrantyType } from "@/unit/constantValue";
import moment from "moment";

export default {
  name: "ServiceStatistics",
  components: {},
  props: {
    initData: Object,
    companyData: Array
  },
  data() {
    return {
      userName: "",
      name: "",
      role: "",
      compId: "",
      expand: false,
      rangeTime: [],
      statusLists: [],
      warrantyStatusLists: WarrantyType,
      search: {
        beginTime: "",
        company: "",
        endTime: "",
        modulType: "",
        ioUnitType: "",
        ioUnitId: "",
        servoModel: "",
        servoId: "",
        servoProductTime: "",
        elecModel: "",
        elecId: ""
      }
    };
  },
  watch: {
    initData: {
      immediate: true,
      handler: function(val) {
        let { rangeTime, ...rest } = val;
        this.search = { ...rest };
        this.rangeTime = rangeTime;
        // this.disabledDate(val.endTime)
      }
    },
    companyData: {
      immediate: true,
      handler: function(val) {
        // let { company } = val;
        if (val) {
          this.search.company = val[0];
        }
      }
    }
  },
  methods: {
    handleChange(e) {
      this.search.company = e;
    },
    onTimeChange(e) {
      let [beginTime, endTime] = e;
      if (e.length > 0) {
        this.search.beginTime = `${moment(beginTime).format(
          "YYYY-MM-DD"
        )}`;
        this.search.endTime = `${moment(endTime).format(
          "YYYY-MM-DD"
        )}`;
      } else {
        this.search.beginTime = "";
        this.search.endTime = "";
      }
    },
    checkBoxChange(e) {
      if (e.target.checked) {
        this.search.partCheckFlag = 0;
      } else {
        this.search.partCheckFlag = 1;
      }
    },
    searchData() {
      this.$emit("emitSearchData", {
        ...this.search,
        rangeTime: this.rangeTime
      });
    },
    restSearchData() {
      let { rangeTime, ...rest } = this.initData;
      this.search = { ...rest };
      this.search.beginTime = `${moment(new Date())
          .subtract(12, "months")
          .format("YYYY-MM-DD")}`,
      this.search.company = this.companyData[0]
      this.search.endTime = `${moment(new Date()).format("YYYY-MM-DD")}`,
      this.rangeTime = [this.search.beginTime, this.search.endTime];
      this.$emit("emitSearchData", {
        ...this.search,
        rangeTime: this.rangeTime
      });
    },
    // 设置禁用日期
    disabledDate(value) {
      const curDate = new Date().getTime()
      // 这里设置天数
      let today = new Date();
      // 设置为去年的今天
      today.setFullYear(today.getFullYear() - 1);
      // 将日期转换成时间戳（单位：毫秒）
      let timestampStart = Math.floor(today / 1000) * 1000; // 开始时间戳
      let timestampEnd = Math.ceil((new Date()) / 1000) * 1000; // 结束时间戳
      const someTimeStamp = (timestampEnd - timestampStart + (1 * 24 * 60 * 60 * 1000) )
      const twelveMonths = curDate - someTimeStamp
      return  new Date(value).getTime() < twelveMonths
    }
  },
  created() {},
  mounted() {
    getRoleId(this);
    this.search.company = this.companyData[0]
  },
  computed: {}
};
</script>

<style scoped="scoped">
.bar {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 16px 16px 16px 16px;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.itemWrap > .label {
  min-width: 90px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #646464;
  text-align: right;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  width: 100%;
  padding: 0px 1px;
}
.search-input {
  width: 120px;
}
</style>
